<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="<%=request.getContextPath() %>/static/jq/jquery-3.3.1.min.js"></script>
    <style>
      *{
        margin: 0;
        border: 0;
        padding: 0;
      }
      .home{
          width: 100vw;
          height: 100vh;
          position: relative;
          background-size: cover;
          background-repeat: no-repeat;
          background-image: url("<%=request.getContextPath()%>/img/backlogin.png");
      }
      .login{
          top: 26%;
          width: 25vw;
          right: 118px;
          height: 46vh;
          overflow: hidden;
          border-radius: 5px;
          position: absolute;
          background-color: #fafafa;
          box-shadow: 0 0 12px -4px;
      }
      .login>.title{
          text-align: center;
          padding: 10px 0 10px 0;
      }
      .data-div{
          height: 100%;
          display: flex;
          padding: 0 10px 0 10px;
          flex-direction: column;
      }
      .data-div>div:not(:last-child){
          height: 25%;
          border-bottom: 1px solid #8e8e8e;
          /*background-color: gray;*/
      }
      .data-div>div>input{
          width: 100%;
          height: 100%;
          font-size: 20px;
          padding-left: 20px;
          background-color: transparent;
      }
      input:focus{
          outline: none;
      }
      input::placeholder{
          color: #cccccc;
      }
      .but-div{
          height: 25%;
          display: flex;
          align-items: center;
          justify-content: center;
      }
      .but{
          width: 90%;
          height: 50%;
          border-radius: 10px;
          background-color: darkorange;
      }
      .but:hover{
          cursor: pointer;
      }
    </style>
</head>
<body>
    <div class="home">
      <div class="login">
          <div class="title">
              <h1>
                  知乎后台管理
              </h1>
          </div>
          <div class="data-div">
              <div>
                  <input type="text" name="username" value="Jiang" placeholder="请输入用户名">
              </div>
              <div>
                  <input type="password" name="password" value="11620" placeholder="请输入密码">
              </div>
              <div class="but-div">
                  <button class="but">登录</button>
              </div>
          </div>
      </div>
    </div>
<script>
    $(function (){
        $(".but").click(function (){
           let data = $(".data-div>div>input");
           let datas = {
               'username' : data[0].value,
               'password' : data[1].value
           }


           $.ajax({
               async : true,
               url : '<%=request.getContextPath() %>/back/admin?ac=login',
               type : 'post',
               data : datas,
               dataType:"json",
               success : function (data) {
                   console.log(data)
                   // console.log(data.data.sname)
                   if (data.status === 200) {
                       sessionStorage.setItem("id",data.data.sid);
                       sessionStorage.setItem("AdminName",data.data.sname);
                       sessionStorage.setItem("avatar",data.data.avatar);
                       location.href="admin?ac=toIndex"
                   }else{
                       alert(data.msg)
                   }
               }
           })
        })
    })
</script>
</body>
</html>
